<template>
  <div>
    <div style="margin-left: 20px; margin-bottom: 20px">
      <el-button type="primary" @click="openNewDialog">添加流程</el-button>
    </div>
    <element-table :url="url" :page-size="10" :columns="columns" ref="elementTable"></element-table>

    <el-dialog title="流程图" :visible.sync="dialogVisible" width="1100px">
      <slot name="-" style="border: none;padding: 0px;margin: 0px;">
        <vue-bpmn style="overflow: hidden;height: 700px;" product="activiti" @processSave="processSave"></vue-bpmn>
      </slot>
    </el-dialog>

    <el-dialog
      title="BPMN文件"
      :visible.sync="bpmndrawer"
      width="80%">
      <xmp>
        <div>
          <pre v-highlight v-if="mbpmn">
            <code class="xml hljs">{{mbpmn}}</code>
          </pre>
        </div>
      </xmp>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="bpmndrawer = false">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog
      title="流程图"
      :visible.sync="pngVisible"
      width="50%"
      align="center">
      <img :src="imgUrl">
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="pngVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>
  import ElementTable from "../../components/element/ElementTable";
  import VueBpmn from "../../components/bpmn/VueBpmn";
  import vkbeautify from 'vkbeautify'; //由npm install vkbeautify 导入依赖，用来格式化XML

  export default {
    name: "design",
    data() {
      return {
        dialogVisible: false,
        pngVisible: false,
        bpmndrawer: false,
        mbpmn: '',
        imgUrl: '',
        url: this.Apis.processList,
        columns: [{
          key: 'id',
          title: '流程ID',
          width: 180
        },{
          key: 'key',
          title: '流程标识',
          width: 150
        }, {
          key: 'name',
          title: '流程名称',
          width: 200
        }, {
          key: 'version',
          title: '版本',
          width: 50
        },{
          key: 'bpmn',
          title: '流程文件',
          width: 150
        },{
          key: 'png',
          title: '流程图',
          width: 150
        },{
          key: 'deploymentId',
          title: '部署ID',
          width: 70
        },
        //   {
        //   key: 'status',
        //   title: '状态',
        //   width: 80,
        //   formatter: (row, key) => {
        //     if (row[key] == 0) {
        //       return "未发布";
        //     }
        //     return "已发布"
        //   }
        // },
          {
          key: 'ora',
          title: '操作',
          operator: [{
            name: "bpmn",
            type: "button",
            click: (row) => {
              this.mbpmn = '';
              this.bpmndrawer = true;
              this.$http.get(this.Apis.processResourceQuery.replace("${resourceName}", row.bpmn, {}).replace("${deploymentId}",
                row.deploymentId).replace("${type}", "bpmn")).then(res => {
                  let str = (res.data).toString();
                  var slice = str.slice(0, str.indexOf("</bpmn2:definitions") + 20);
                  var s = vkbeautify.xml(slice);
                  this.mbpmn = s;
                }
              )
            },
            // hidden: (row) => {
            //   return row.status == 1;
            // }
          },{
            name: "png",
            type: "button",
            click: (row) => {
              this.imgUrl = '';
              this.pngVisible = true;
              this.$http({
                method: "get",
                url: this.Apis.processResourceQuery.replace("${resourceName}", row.png).replace("${deploymentId}",
                  row.deploymentId).replace("${type}", "png"),
                responseType: "blob"
              }).then(resp => {
                console.log(resp.data);
                let src = window.URL.createObjectURL(new Blob([resp.data, {type: 'image/png'}])); //创建blob,设置文件类型
                this.imgUrl = src;
              });

            },
            // hidden: (row) => {
            //   return row.status == 1;
            // }
          },
          // {
          //   name: "发布",
          //   type: "button",
          //   click: (row) => {
          //     let that = this;
          //     this.$http.post(this.Apis.processDeploy.replace("${processKey}", row.key), {}).then(res => {
          //       console.log(res);
          //       if(res.data.errCode === 200){
          //         this.$message.success("流程发布成功!");
          //         that.$refs.elementTable.reload();
          //       }
          //     });
          //   },
          //   // hidden: (row) => {
          //   //   return row.status == 1;
          //   // }
          // },
            {
            name: "删除",
            type: "button",
            click: (row) => {
              let that = this;
              var b = confirm("确定要删除？");
              if(!b){
                return;
              }
              this.$http.post(this.Apis.processRemove.replace("${id}", row.deploymentId), {}).then( res => {
                console.log(res);
                if (res.data.errCode === 200) {
                  this.$message.success("删除成功!");
                  that.$refs.elementTable.reload();
                }
              });
            }
          }]
        }]
      }
    },
    components: {
      ElementTable,
      VueBpmn
    },
    methods: {
      openNewDialog() {
        this.dialogVisible = true;
      },
      processSave(data) {
        let that = this;
        that.$http.post(this.Apis.processBuffer, data).then(res => {
          if (res.data.errCode === 200) {
            that.dialogVisible = false;
            that.$refs.elementTable.reload();
            this.$message.success("流程[" + data.processKey + "]已保存");
          }
        });
      },
      deploy() {

      }
    }
  }
</script>

<style scoped>
</style>
